<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="personalcenter.css">
</head>
<body>
    <div class="personal-center-container">
        <header class="profile-header">
            <div class="avatar-container">
                <img src="../../images/avatar.webp" alt="用户头像" class="avatar">
                <button class="edit-avatar-btn">更换头像</button>
            </div>
            <div class="user-info">
                <h1 class="username">用户名</h1>
                <p class="user-id">ID: 123456</p>
                <p class="user-level">会员等级: 黄金会员</p>
            </div>
        </header>

        <main class="profile-content">
            <nav class="profile-nav">
                <ul>
                    <li class="active"><a href="#basic-info">基本信息</a></li>
                    <li><a href="#security">安全设置</a></li>
                    <li><a href="#orders">我的订单</a></li>
                    <li><a href="#address">收货地址</a></li>
                    <li><a href="#preferences">偏好设置</a></li>
                </ul>
            </nav>

            <div class="profile-sections">
                <!-- 基本信息部分 -->
                <section id="basic-info" class="profile-section active">
                    <h2>基本信息</h2>
                    <form class="profile-form">
                        <div class="form-group">
                            <label for="nickname">昵称</label>
                            <input type="text" id="nickname" value="小明同学">
                        </div>
                        <div class="form-group">
                            <label for="gender">性别</label>
                            <select id="gender">
                                <option value="male">男</option>
                                <option value="female" selected>女</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="birthday">生日</label>
                            <input type="date" id="birthday" value="1990-01-01">
                        </div>
                        <div class="form-group">
                            <label for="bio">个人简介</label>
                            <textarea id="bio" rows="3">热爱生活，喜欢编程</textarea>
                        </div>
                        <button type="submit" class="save-btn">保存修改</button>
                    </form>
                </section>

                <!-- 安全设置部分 -->
                <section id="security" class="profile-section">
                    <h2>安全设置</h2>
                    <div class="security-item">
                        <h3>登录密码</h3>
                        <p>上次修改时间: 2023-05-15</p>
                        <button class="modify-btn">修改密码</button>
                    </div>
                    <div class="security-item">
                        <h3>手机绑定</h3>
                        <p>已绑定手机: 138****1234</p>
                        <button class="modify-btn">更换手机</button>
                    </div>
                    <div class="security-item">
                        <h3>邮箱绑定</h3>
                        <p>已绑定邮箱: user***@example.com</p>
                        <button class="modify-btn">更换邮箱</button>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script src="personalcenter.js"></script>
    <script src="../../router.js"></script>
</body>
</html>